<template>
    <div style=" display: flex; flex-direction: column;">
      <el-form :inline="true" :model="queryForm" style="margin-top: 20px;margin-left: 20px;">
        <el-form-item label="药品组合名称">
          <el-input v-model="queryForm.name" placeholder="请输入药品组合名称" clearable />
        </el-form-item>
        <el-form-item label="分类">
          <el-select   clearable v-model="value" placeholder="请选择分类" style="width: 120px">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        </el-form-item>
        <el-form-item label="状态" style="width: 130px;">
          <el-select v-model="queryForm.status" placeholder="请选择" clearable>
            <el-option label="起售" value="1" />
            <el-option label="禁售" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate(true,null)">新增药品组合</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%" height="555">
        <el-table-column fixed prop="name" label="药品组合名称" width="150" align="center" />
        <el-table-column prop="categoryId" label="分类" width="150" align="center" >
          <template v-slot="{ row }">
          {{ selectCategory(row.categoryId) }}
        </template>
        </el-table-column>
        <el-table-column prop="price" label="价格/元" width="80" align="center"/>
        <el-table-column prop="image" label="图片" width="100" align="center">
            <template v-slot="{ row }">
                <el-image style="width: 90px; height:80px" :src="row.image"/>
           </template>  
        </el-table-column>
        <el-table-column prop="description" label="描述信息" width="180" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template v-slot="{ row }">
            <span v-if="row.status === 1">启售</span>
            <span v-else>停售</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" align="center" />
        <el-table-column prop="updateTime" label="最后操作时间" width="120" align="center" />
        <el-table-column fixed="right" label="操作" width="120">
          <template v-slot="{row}">
            <el-popconfirm :icon="InfoFilled" @confirm="confirmEvent(row.id)" @cancel="cancelEvent" title="你确定要删除该账号吗?">
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button link type="primary" size="small" @click="addOrUpdate(false,row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; margin-top: 20px; margin-left: 240px;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>  
      <SetmealForm :onSubmit="onSubmit" ref="setmealForm"></SetmealForm>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import { reactive } from 'vue'
  const categoryList = ref([])
const value = ref()
  // 获取分类列表
import { getCategories } from '@/apis/category.js'
async function getCategoryList() {
  const res = await getCategories(2)
  console.log(res.data.data)
  categoryList.value = res.data.data
}
getCategoryList()
function selectCategory(categoryId: number){
  const foundCategory = categoryList.value.find((category: any) => {
    return category.id === categoryId;
  });   
  if(foundCategory){
    return foundCategory.name;
  }
}
  const queryForm = reactive({
    name: '',
    categoryId: null,
    status:null,
  })
  
  //分页
  const total = ref(Number)
  const currentPage = ref(1)
  const pageSize = ref(5)
  const small = ref(true)
  const background = ref(false)
  const disabled = ref(false)
  
  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pageSize.value = val
    onSubmit();
  }
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage.value = val
    onSubmit();
  }
  
  const tableData = ref([])
  import { getList } from '@/apis/setmeal.js'
  async function getSetmealList() {
    const res = await getList(currentPage.value, pageSize.value)
    console.log(res)
    tableData.value = res.data.data.records
    console.log(res.data.data.total)
    total.value = res.data.data.total
  }
  getSetmealList()
  
   //条件查询
  const onSubmit = async () => {
    queryForm.categoryId = value.value
    console.log('submit!')
    const res = await getList(currentPage.value, pageSize.value,queryForm.name,queryForm.categoryId,queryForm.status)
    console.log(res.data.data.records)
    tableData.value = res.data.data.records
    total.value = res.data.data.total
  }
  
  //删除
  import { InfoFilled } from '@element-plus/icons-vue'
  import {deleteSetmeal} from '@/apis/setmeal.js'
  import { ElMessage } from 'element-plus'
  const confirmEvent = async (id: null) => {
    console.log('删除!' + id)
    //删除该员工 
  const  res= await deleteSetmeal(id) 
  if(res.data.code===0){
    ElMessage.error(res.data.msg)
  } 
    //并刷新表格
    onSubmit()
  }
  const cancelEvent = () => {
    console.log('取消!')
  }

  import SetmealForm from './SetmealForm.vue'
  
  
  const setmealForm=ref(null)
  //添加菜品
  function addSetmeal() {
     setmealForm.value.changeDialogVisible(true)
     console.log('添加药品组合!')
  }
  //修改员工信息
  function updateSetmeal(row: any) {
    console.log('修改药品组合!')
    setmealForm.value.changeDialogVisible(false)
    setmealForm.value.editFormData(row)
  }
  function addOrUpdate(isadd:boolean,row:any){
    if(isadd){
      console.log('添加菜品!')
      addSetmeal()
    }else{
      console.log('修改员工信息!')
      updateSetmeal(row)
    } 
  } 
  </script>